@extends('layouts.back_stage')
@section('content')
  <style>
  /* .container{margin-top:30px} */
  #app{padding:20px}
  [v-cloak] {display: none;}
  .right-f{float:right ;padding-right:30px}
  .ingred_sel{width:200px;margin:0 30px 0 10px} 
  .type_x{margin:40px 0px 5px 0px ;background:#fff;padding:29px 0 28px 30px;} 
  .updata{font-size:10px;color:#409eff}
  .pation{text-align:center;margin-top:5px}
  .table_margin{padding:10px 30px; background:#fff;text-align:content;margin-top:10px}
  .look_margin{margin:20px 0}
  .caser{width:300px}
  ::-webkit-scrollbar {height: 8px;}
  .el-table tr:hover>td{background:initial !important;}
  .el-table tr.current-row>td{background:initial !important;}
  .el-table__expanded-cell[class*=cell]{padding:0 !important;}
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td{background:initial !important;}
  
    
  .el-table .warning-row {
    background: #ccc;
  }

  .el-table .success-row {
    background: #92cc17;
  }
  .spTip{width:20px;height:20px;display:inline-block;margin:0 5px 0 20px;}
  </style>
  <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">加工厂管理</h3></div>
        <div class="page-body" id="app" v-cloak>
        <div class="kast">
        <span class="right-f">
                    <el-button type="primary"  size="small"   @click="added" >添加</el-button>
                    <el-button type="primary" class="picking" size="small"  @click="Enabled">启用</el-button>
                    <el-button type="primary" class="picking" size="small"  @click='outage'>停用</el-button>
                    <el-button type="primary"  size="small"   @click="audit">审核</el-button>        
                    <el-button type="primary"  size="small"   @click="reverify">反审</el-button>
                    <el-button type="primary"  size="small"   @click="expost">导出</el-button>
              </span> 
              </div>
              <div class="type_x">
                      <label>名称：</label>
                          <el-input  class="ingred_sel"  id="namex" v-model="input.name" size="small" placeholder="请输入名称" clearable></el-input>
                      <label>手机号：</label>
                         <el-input  class="ingred_sel on" id="telx" v-model="input.tel"  size="small" placeholder="请输入完整手机号码" clearable></el-input>
                         <el-button  class="but-left"   size="small" @click="onGet" type="primary">查询 </el-button>
                         <el-button  class="but-left"  type="primary" size="small" @click="srset" >重置 </el-button>
                      <!-- <span class="right-f">
                            <el-button type="primary"  size="small"   @click="added" >添加</el-button>
                            <el-button type="primary"  size="small"   @click="audit">审核</el-button>        
                            <el-button type="primary"  size="small"   @click="reverify">反审</el-button>
                            <el-button type="primary"  size="small"   @click="expost">导出</el-button>
                      </span> -->
                 </div>
                 <div class="table_margin">
                 <p style="height:20px;line-height:20px;display: inline-flex;float: right;">
                            <!-- <span class="spTip" style="background:#7ccafa;"></span>已确认制单-->
                            <span class="spTip" style="background:#fff;border:1px solid #ccc"></span>未审核 
                            <span class="spTip" style="background:#ccc;"></span>停用
                            <span class="spTip" style="background:#9fc53e;"></span>已审核
                   </p>
                 <template>
                      <el-table
                        :data="tableData"
                        border size="small"
                        @filter-change="filterTag"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"
                        style="width: 100%">
                        <el-table-column  align="center" type="selection"  :resizable='false' width="50"></el-table-column>
                        <el-table-column prop="loop" align="center" :resizable='false' label="序号"  width="50"> </el-table-column>
                        <el-table-column  prop="jigou" align="center"  :resizable='false' label="所属机构" width="150"></el-table-column>
                        <!-- <el-table-column 
                          prop="type"
                          label="类型"
                          align="center"
                          :resizable='false'
                          width="70"
                          column-key="type"
                          :filters="[{ text: '分公司', value: '0' }, { text: '代理商', value: '1' },{ text: '客户', value: '2' }]">
                          <template slot-scope="scope">
                             <span v-if="scope.row.type===0">分公司</span>
                             <span v-if="scope.row.type===1">代理商</span>  
                             <span v-if="scope.row.type===2">客户</span>  
                          </template>
                        </el-table-column> -->
                        <el-table-column
                          prop="name"
                          align="center"
                          :resizable='false'
                          label="加工厂名称"
                          width="110">
                        </el-table-column>
                        <el-table-column
                          prop="tel"
                          label="手机号码"
                          :resizable='false'
                          align="center"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="地址"
                          :resizable='false'
                          align="center"
                          min-width="180"
                         >
                        </el-table-column>
                        <el-table-column
                      prop="verify_user"
                      label="审核人"
                      :resizable='false'
                      align="center"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      prop="verified_at"
                      label="审核时间"
                      align="center"
                      :resizable='false'
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="admin_a"
                      label="录入人"
                      align="center"
                      :resizable='false'
                      width="80">
                      
                    </el-table-column>
                    <el-table-column
                        prop="created_at"
                        label="录入时间"
                        align="center"
                        :resizable='false'
                        width="150"
                      >
                    </el-table-column>
                    <el-table-column
                        prop="status_a"
                        label="审核状态"
                        align="center"
                        :resizable='false'
                        width="90"
                        column-key="status"
                      :filters="[{ text: '未审核', value: '1,11' }, { text: '已审核', value: '2,12' }]"
                      >
                      <template slot-scope="scope">
                      <span v-if="scope.row.status_a===1">未审核</span>
                        <span v-if="scope.row.status_a===2">已审核</span>
                        <span v-if="scope.row.status_a===11">未审核</span>
                        <span v-if="scope.row.status_a===12">已审核</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      :resizable='false'
                      label="状态"
                      align="center"
                      width="60"
                      column-key="status"
                      :filters="[{ text: '启用', value: '1,2' }, { text: '停用', value: '11,12' }]"
                      >
                      <template slot-scope="scope">
                        <span v-if="scope.row.status===1" >启用</span>
                        <span v-if="scope.row.status===2">启用</span>
                        <span v-if="scope.row.status===11">停用</span>
                        <span v-if="scope.row.status===12">停用</span>
                      </template>
                      </el-table-column>
                        <el-table-column
                          fixed="right"
                          label="操作"
                          :resizable='false'
                          align="center"
                          width="100">
                          <template slot-scope="scope" > 
                        <!-- <template>
                            <a v-if="scope.row.status===11 ||scope.row.status===12"  @click="deleteRow($event)" class="updata">使用</a>
                            <a v-if="scope.row.status===1 || scope.row.status===2" @click="deleteRow($event)" class="updata" >停用</a>
                        </template> -->
                            <template>
                                  <a  v-if="scope.row.status===1"  class="updata" @click="updataDis(scope)">修改</a > 
                                  <a  v-if="scope.row.status===11 ||scope.row.status===12 ||scope.row.status===2"  class="updata" @click="updataDis(scope)"></a > 
                            </template>
                            <el-button type="text" size="small" @click="lookDis(scope)">查看</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                    <div class="pation">
                    <el-pagination background layout="prev, pager, next"  @current-change="handleCurrentChange" :total="total"></el-pagination>
                    </div>
                   </div>  
        </div>         
  </div>
 
  <script>
      new Vue({
        el: '#app',
      data() {     
          return {
            aelect_type:'',
            tableData:[],//
            total:1,//分页的最大页数
            change:1,//点击分页的页数
            input:{// 这个是点击查询获得名称跟手机号码
              name:'',
              tel:''
            },
            type:'',//列表里的类型的下拉
            status:'',//列表里的状态的下拉
            changboxid:'',//多选框装id使用停用单个
            changbox:[],//多选框装id使用停用多个
            temp:true,//开关使用跟停用
            changboxStatus:[],//多选框装status使用停用多个
            updateForm: {
                pid:'',
                type:'',
                name: '',
                tel: '',
                area:[],
                area_bh:[],
                address: '',
                bank_account: '',
                start: '',
                end: '',
                id:''
              },
              selectedOptions: [],
              options:[],
              pleader:'',
          }
        },
      methods: {
        //启用
        Enabled(){
              if(this.changbox==''){
                        this.$notify.error({
                            title: '提示',
                            message: "至少选择一项",
                        });
                        return false;
                    }
              if(this.changboxStatus==1 ||this.changboxStatus==2){
                this.$notify.error({
                            title: '提示',
                            message: '使用状态下 不能重复操作',
                        });
                        return false;
              }
            if(this.changbox.length==1){
                if(this.changboxStatus==11){
                  this.changboxStatus==1
                  this.actionPost();
                  this.tabelPost();
                }
                if(this.changboxStatus==12){
                  this.changboxStatus==2
                  this.actionPost();
                  this.tabelPost();
                }
              this.$notify.success({
                        title: '提示',
                        message: '操作成功',
                    });
            }else{
               for(var e in this.changboxStatus){
                 if(this.changboxStatus[e]==1 ||this.changboxStatus[e]==2){
                  this.$notify.error({
                            title: '提示',
                            message: '使用状态下 不能重复操作',
                        });
                        return false;
                 }
               }
               for(var k in this.changboxStatus){
                    if(this.changboxStatus[k]==11){
                      this.changboxStatus=1
                      this.actionPost();
                      this.tabelPost();
                    }
                    if(this.changboxStatus[k]==12){
                      this.changboxStatus=2
                      this.actionPost();
                      this.tabelPost();
                    }
                    this.$notify.success({
                            title: '提示',
                            message: '操作成功',
                        });
                     break; 
               }  
            }
        },
        //停用 
        outage(){
          if(this.changbox==''){
                        this.$notify.error({
                            title: '提示',
                            message: "至少选择一项",
                        });
                        return false;
                    }
              if(this.changboxStatus==11 ||this.changboxStatus==12){
                this.$notify.error({
                            title: '提示',
                            message: '停用状态下 不能重复操作',
                        });
                        return false;
              }
            if(this.changbox.length==1){
                if(this.changboxStatus==1){
                  this.changboxStatus==11
                  this.actionPost();
                  this.tabelPost();
                }
                if(this.changboxStatus==2){
                  this.changboxStatus==12
                  this.actionPost();
                  this.tabelPost();
                }
              this.$notify.success({
                        title: '提示',
                        message: '操作成功',
                    });
            }else{
               for(var e in this.changboxStatus){
                 if(this.changboxStatus[e]==11 ||this.changboxStatus[e]==12){
                  this.$notify.error({
                            title: '提示',
                            message: '停用状态下 不能重复操作',
                        });
                        return false;
                 }
               }
               for(var k in this.changboxStatus){
                    if(this.changboxStatus[k]==1){
                      this.changboxStatus=11
                      this.actionPost();
                      this.tabelPost();
                    }
                    if(this.changboxStatus[k]==2){
                      this.changboxStatus=12
                      this.actionPost();
                      this.tabelPost();
                    }
                    this.$notify.success({
                            title: '提示',
                            message: '操作成功',
                        });
                     break; 
               }  
            }
        },
       
        typeValue(val){
             this.aelect_type=val
             this.updateForm.type=this.aelect_type
             
            },
        srset(){
           this.input.name="",
           this.input.tel="",
           this.tabelPost();
        },
        tableRowClassName({row}){
             if(row.status==11 || row.status==12 ){
              return 'warning-row';
             }else if(row.status==2){
              return 'success-row';
             }
             return '';
          },
       
        // //修改提交
        // UpdataSubmit(){
        //   let that=this
        //   let arr=this.updateForm.area_bh
        //     if(arr.length==1){
             
        //        $.ajax({
        //             headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
        //             type:'post',
        //             url:`/supplier/update/${this.updateForm.id}`,
        //             dataType:'json',
        //             data:this.updateForm,
        //             success:function(res){
        //               that.dialogVisible=false
        //               that.tabelPost();
        //             }
        //           });
        //     }else{
              
        //         for(var e in arr){ 
        //         }
        //         $.ajax({
        //             headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
        //             type:'post',
        //             url:`/supplier/update/${this.updateForm.id}`,
        //             dataType:'json',
        //             data:this.updateForm,
        //             success:function(res){
        //               that.dialogVisible=false
        //               that.tabelPost();
        //             }
        //           });
        //     }
           
        // },
        //三级联动1
        handleChange(value) {
         const that=this;
            $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
               })
      },
        //点击修改
        updataDis(scope){
            window.location.href = `/supplier/update/${scope.row.id}`;
        },
        lookDis(scope){
          window.location.href = `/supplier/look/${scope.row.id}`;
        },
        tabelPost(){
           let that=this
            $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:"get",
                    url:'/supplier/index',
                    data:{
                      current_page:this.change,
                      name:this.input.name,
                      tel:this.input.tel,
                      type:this.type,
                      status:this.status,
                    }
                  }).then(function(res){
                       console.log(res.content)
                    var opt=[];
                    let i=-10;
                    for(var e in res.content.data){  
                      i++;
                     
                      if(res.content.data[e].loged_by==null){
                        res.content.data[e].loged_by="为空"
                      }
                      if(res.content.data[e].verify_user==null){
                        res.content.data[e].verify_user="为空"
                      }
                      if(res.content.data[e].company=='' || res.content.data[e].company==null){
                        res.content.data[e].company={
                          company_name:''
                        }
                      }
                      opt.push({
                        'loop':i+(10*that.change),
                       'jigou':res.content.data[e].company.company_name,
                       
                        'name':res.content.data[e].name,
                        'tel':res.content.data[e].tel,
                        'address':res.content.data[e].address,
                        'verify_user':res.content.data[e].verify_user.admin_name,
                        'verified_at':res.content.data[e].verified_at,
                        'admin_a':res.content.data[e].loged_by.admin_name,
                        'created_at':res.content.data[e].created_at,
                        'status':res.content.data[e].status,
                        'id':res.content.data[e].id,
                        'contacts':res.content.data[e].contacts,
                        'status_a':res.content.data[e].status,
                      })
                    
                    }
                   that.total=res.content.total
                 
                   that.tableData=opt
                  
                })
             },
             actionPost(){
               let that=this
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'post',
                    url:'/supplier/active',
                    dataType:'json',
                    data:{
                      ids:this.changbox
                    },
                    success:function(res){
                      that.tabelPost();
                    
                    }
                  })
             },
             //点击页数
             handleCurrentChange(val){
                this.change=val
                this.tabelPost(); 
             }, 
             //点击查询
             onGet(){
              this.tabelPost(); 
                
             },
             ////列表里的下拉菜单
             filterTag(value){
                if(value.status!=undefined){
                    var val2=value.status;
                    var stas2='';
                    for(let i=0; i<val2.length;i++){
                        stas2=stas2+val2[i]+',';
                    } 
                    this.status=stas2.substr(0, stas2.length - 1);
                    this.start(); 
                }
             },
             start(){
              let that=this
            $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:"get",
                    url:'/supplier/index',
                    data:{
                      name:this.input.name,
                      tel:this.input.tel,
                      type:this.type,
                      status:this.status,
                    }
                  }).then(function(res){
                    var opt=[];
                    let i=-10;
                    for(var e in res.content.data){  
                      i++;
                     
                      if(res.content.data[e].loged_by==null){
                        res.content.data[e].loged_by="为空"
                      }
                      if(res.content.data[e].verify_user==null){
                        res.content.data[e].verify_user="为空"
                      }
                      if(res.content.data[e].company=='' || res.content.data[e].company==null){
                        res.content.data[e].company.company_name=""
                      }
                      opt.push({
                        'loop':i+(10*that.change),
                       'jigou':res.content.data[e].company.company_name,
                        'name':res.content.data[e].name,
                        'tel':res.content.data[e].tel,
                        'address':res.content.data[e].address,
                        'verify_user':res.content.data[e].verify_user.admin_name,
                        'verified_at':res.content.data[e].verified_at,
                        'admin_a':res.content.data[e].loged_by.admin_name,
                        'created_at':res.content.data[e].created_at,
                        'status':res.content.data[e].status,
                        'id':res.content.data[e].id,
                        'contacts':res.content.data[e].contacts,
                        'status_a':res.content.data[e].status,
                      })
                    
                    }
                   that.total=res.content.total
                 
                   that.tableData=opt
                  
                })
             },
             //这是多选框
             handleSelectionChange(val){
              this.changbox=[]
              this.changboxStatus=[]
                  for(var e in val){
                    this.changbox.push(val[e].id)
                    this.changboxStatus.push(val[e].status)
                  }
              },
            
              //审核
              audit(){
                let that=this
                 if(this.changbox==''){
                          this.$notify.error({
                              title: '提示',
                              message: '请选择需要审核的项',
                          });
                          return false;
                      }
                    if(this.changbox.length==1){
                        if(this.changboxStatus==1 || this.changboxStatus==11){
                            $.ajax({
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'post',
                            url:'/supplier/verify',
                            data:{
                              ids:this.changbox
                            },
                            success:function(res){
                               that.tabelPost();
                               that.$notify.success({
                                    title: '提示',
                                    message: '审核提交成功',
                                });
                              
                              }
                            })
                        }else{
                            this.$notify.error({
                                title: '提示',
                                message: "已经审核的项不能再次进行审核",
                            });
                        }
                    } else{
                      for(var e in this.changboxStatus){
                          if(this.changboxStatus[e]==2 || this.changboxStatus[e]==12){
                            this.$notify({
                                title: '警告',
                                message: '你选的项中有已审核的项 已审核的项不能再次审核',
                                type: 'warning'
                              }); 
                              return false; 
                          }
                      }
                      for(var e in this.changboxStatus){
                         if(this.changboxStatus[e]==1){
                          this.changboxStatus=2
                          this.shenHer();
                          that.tabelPost();
                         }
                         if(this.changboxStatus[e]==11){
                          this.changboxStatus=12
                          this.shenHer();
                          that.tabelPost();
                         }
                         this.$notify.success({
                                title: '提示',
                                message: '审核提交成功',
                            });
                        break;
                      }
                    }     
              },
              shenHer(){
                let that=this
                    $.ajax({
                      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                      type:'post',
                      url:'/supplier/verify',
                      data:{
                        ids:this.changbox
                      },
                      success:function(res){

                        that.tabelPost();
                       
                      } 
                    })  
              },
               //反审
              reverify(){
                let that=this
                 if(this.changbox==''){
                          this.$notify.error({
                              title: '提示',
                              message: '请选择需要审核的项',
                          });
                          return false;
                      }
                    if(this.changbox.length==1){
                        if(this.changboxStatus==2 || this.changboxStatus==12){
                            $.ajax({
                           headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                            type:'post',
                            url:'/supplier/verify',
                            data:{
                              ids:this.changbox
                            },
                            success:function(res){
                               that.tabelPost();
                               that.$notify.success({
                                    title: '提示',
                                    message: '审核提交成功',
                                });
                              
                              }
                            })
                        }else{
                            this.$notify.error({
                                title: '提示',
                                message: "已经审核的项不能再次进行审核",
                            });
                        }
                    } else{
                      for(var e in this.changboxStatus){
                          if(this.changboxStatus[e]==1 || this.changboxStatus[e]==11){
                            this.$notify({
                                title: '警告',
                                message: '你选的项中有已审核的项 已审核的项不能再次审核',
                                type: 'warning'
                              }); 
                              return false; 
                          }
                      }
                      for(var e in this.changboxStatus){
                         if(this.changboxStatus[e]==2){
                          this.changboxStatus=1
                          this.shenHer();
                          that.tabelPost();
                         }
                         if(this.changboxStatus[e]==12){
                          this.changboxStatus=11
                          this.shenHer();
                          that.tabelPost();
                         }
                         this.$notify.success({
                                title: '提示',
                                message: '审核提交成功',
                            });
                           break;
                      }
                    }     
              },
               //导出
            expost(){
              if(this.changbox!=''){
                  window.location.href=`/supplier/export?ids=${this.changbox}`
                }else{
                  this.$notify.error({
                        title: '提示',
                        message: '请选择需要导出的项',
                    });
                }
            },
             //新增跳转
              added(){
                window.location.href = "/supplier/create";
              },
            
        },
       created(){
           this.tabelPost();
         }
      })
  </script>
@endsection